<script>
/* eslint-disable */
import Form from '@cci/cp-form'
// console.log(Form)
const components = {
  SelectTime: () => import('@/components/Select/SelectTime'),
  SelectTimeRange: () => import('@/components/Select/SelectTimeRange')
}
const componentList = Object.keys(components)

export default {
  name: 'searchForm',
  mixins: [Form],
  components,
  beforeCreate() {
    this.R = this.R || {}
    componentList.forEach((name) => {
      this.R[`${name}Render`] = function (h, item, opts) {
        if (!item.anchor) {
          item.anchor = 4
        }
        // console.log(item.anchor);
        opts.on['change'] = this.mixinEvent(
          opts.on['change'],
          this.handleChange.bind(this, item)
        )
        return [h(name, opts)]
      }
    })
  },
  methods: {
    wrapCol(h, { anchor }, children) {
      const Ac = typeof anchor
      const span = (Ac === 'object' ? anchor.span : anchor) || 4
      // const lg = (Ac === "object" ? anchor.lg : anchor) || 8
      // const sm = (Ac === "object" ? anchor.sm : anchor) || 12
      // const xs = (Ac === "object" ? anchor.xs : anchor) || 12
      // const xl = (Ac === "object" ? anchor.xl : anchor) || 6
      const attrs = {
        span
        // lg,
        // xl,
        // xs: Math.max(xs, 12),
        // sm: Math.max(sm, 12)
      }
      return h('c-col', { attrs, staticClass: 'fields-box-item' }, [children])
    },
    wrapFormItem(h, { label, prop, className = '' }, children) {
      // console.log(children)
      return h(
        'c-form-item',
        {
          attrs: {
            label,
            prop
          },
          key: prop,
          class: `form-item ${className}`
        },
        children
      )
    },
    wrapForm(h, children) {
      return h(
        'form',
        {
          staticClass: 'c-form wrap-form',
          class: {
            ['c-form--label-' + this.labelPosition]: this.labelPosition,
            'c-form--inline': this.inline,
            'c-form--label-left': this.inline
          }
        },
        children
      )
    },
    handleChange(item, e) {
      this.model[item.prop] = e
      this.emitRelated(e, item.relatedFields, item.ref || item.prop)
    }
  },
  renderItems(h, items = this.items) {
    items = items.filter(this.itemFilters)
    return items
      .map(this.genChild.bind(this, h))
      .map((children, i) => {
        return this.wrapFormItem(h, items[i], children)
      })
      .map((children, i) => {
        items[i].anchor = items[i].anchor ? items[i].anchor : 4
        return this.inline ? this.wrapCol(h, items[i], children) : children
      })
  },
  render(h, children) {
    this.$nextTick(() => {
      this.items.forEach((_t) => {
        _t.anchor = _t?.anchor || 4
      })
    })

    // console.log(this.items)
    let _dSlot
    let _key = -1
    if (this.$slots.default) {
      _dSlot = [...this.$slots.default]
      if (_dSlot) {
        _dSlot.forEach((item, key) => {
          if (item.data.staticClass === 'reviewBtn') {
            _key = key
          }
        })
        if (_key > -1) {
          let slotItem = _dSlot.splice(_key, 1)
          return this.wrapForm(h, [
            _dSlot,
            h('c-row', { staticClass: 'fields-box' }, [
              slotItem,
              ...this.renderItems(h, this.items)
            ])
          ])
        }
      }
    }
    return this.wrapForm(h, [
      this.$slots.default,
      h(
        'c-row',
        { staticClass: 'fields-box', attrs: { gutter: 16 } },
        this.renderItems(h, this.items)
      )
    ])
  }
}
</script>
